<div class="page-container container" *ngIf="!addView">
  <div class="fixed-nav-box toolBarCat bg white-text">
    <div fxLayout="row" fxLayoutAlign="start center">
      <div fxFlex fxLayout="row" fxLayoutAlign="start center" class="pl5 dash-cat-nav" *ngIf="categorys.length >0">
        <b>{{'行业' |translate}}：</b>
        <!-- <app-categroy [option]="option" (onChangeCat)="handleUpdated($event)"></app-categroy> -->
        <ng-cat [option]="option" (onChangeCat)="handleUpdated($event)"></ng-cat>
      </div>
      <div  fxLayout="row" fxLayoutAlign="start center" class="pl5 dash-cat-nav" *ngIf="categorys.length ==0">
        <p>暂无监控的行业，<a mat-raised-button color="primary" (click)="add()">立即添加</a></p>
      </div>
      <div fxFlex="120px" fxLayout="row" fxLayoutAlign="end center">
        <a class="linkHover" mat-raised-button [color]="'primary'" (click)="add()">{{'添加' | translate}}<i class="fa fa fa-plus pl5"></i></a>
      </div>
    </div>
  </div>
  <div class="container pt72">
    <div class="pt10"></div>
     <nav mat-tab-nav-bar fixed-top>
      <a mat-tab-link routerLink="sell" routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive">{{'销售趋势' |translate}}</a>
      <a mat-tab-link routerLink="category" routerLinkActive #rla3="routerLinkActive" [active]="rla3.isActive">{{'类别分析' |translate}}</a>
      <a mat-tab-link routerLink="list" routerLinkActive #rla4="routerLinkActive" [active]="rla4.isActive">{{'Top排行' | translate}}</a>
      <!-- <a mat-tab-link routerLink="word" routerLinkActive #rla5="routerLinkActive" [active]="rla5.isActive">{{'词云分析' | translate}}</a> -->
    
    </nav>

    <mat-card *ngIf="catInfo">
      <mat-card-header>
        <mat-card-title>
          <a [matTooltip]="catInfo.categoryName">{{catInfo.categoryName | categoryName}}</a>
        </mat-card-title>
        <b fxFlex class="right-align">{{'更新于' |translate}}{{catInfo.date | dateFormat}}</b>
      </mat-card-header>
      <mat-card-content>
        <table class="centered responsive-table small">
          <thead>
            <tr>
              <th>{{'类目' |translate}}</th>
              <th class="text-overflow" [title]="'日销售额' |translate">{{'日销售额' |translate}}</th>
              <th class="text-overflow" [title]="'日销售量' |translate">{{'日销售量' |translate}}</th>
              <th class="text-overflow" [title]="'近30天销售额' |translate">{{'近30天销售额' |translate}}</th>
              <th class="text-overflow" [title]="'近30天销售量' |translate">{{'近30天销售量' |translate}}</th>
              <th class="text-overflow" [title]="'动销店铺数' |translate">{{'动销店铺数' |translate}}</th>
              <th class="text-overflow" [title]="'动销宝贝数' |translate">{{'动销宝贝数' |translate}}</th>            
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><b>{{catInfo.categoryName | categoryName}}</b></td>
              <td [matTooltip]="catInfo.sellMoney |number:'1.0-2'"><span class="tm-yen">¥</span>{{catInfo.sellMoney |  bigNum}}</td>
              <td [matTooltip]="catInfo.sellAmount | number:'1.0-0'">{{catInfo.sellAmount|bigNum}}</td>
              <td [matTooltip]="catInfo.monthSellMoney | number:'1.0-2'"><span class="tm-yen">¥</span>{{catInfo.monthSellMoney | bigNum}}</td>
              <td [matTooltip]="catInfo.monthSellAmount | number:0">{{catInfo.monthSellAmount |bigNum}}</td>
              <td>{{catInfo.shopNum | number:'1.0-0'}}</td>
              <td>{{catInfo.productNum | number:'1.0-0'}}</td>
            
            </tr>
          </tbody>
        </table>
      </mat-card-content>
    </mat-card>
    <en-mark></en-mark>
    <router-outlet></router-outlet>
  </div>
</div>
<!-- add -->
<div class="page-container" *ngIf="addView">
  <div style="position: relative;">
    <div class="card-panel">
      <a mat-raised-button color="primary" (click)="add()" class="linkHover"><i class="fa fa-angle-left pr5"></i>{{'返回' |translate}}</a>
    
      <span>{{'类目权限管理'|translate}}：{{'目前您已监控'|translate}}<b class="red-text">{{categorys.length}}/{{user.activeVersionInfo.categoryCount}}</b>{{'个类目。'|translate}}</span>
    </div>
    <ngx-busy [busy]="catEvent"></ngx-busy>
    <!-- [ngBusy]="catEvent" -->
    <div class="container">
      <div class="table-view" fxLayout="row" fxLayout.xs="column">
        <div fxFlex="50%" fxFlex.xs="100%">
          <h2>{{'行业监控'| translate}}</h2>
          <hr/>
          <table class="bordered highlight">
            <thead>
              <tr>
                <th>{{'序号' |translate}}</th>
                <th>{{'行业' |translate}}</th>
                <th>{{'监控时间' |translate}}</th>
                <th>{{'监控' |translate}}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let cat of categorys;let $index = index;">
                <td>{{$index+1}}</td>
                <td><a class="hoverLink cp" (click)="goLook(cat)" [title]="cat.value" [matTooltip]="cat.value">{{cat.value | categoryName}}</a></td>
                <td>{{cat.createTime | date:'yyyy-MM-dd'}}</td>
                <td>
                  <monitor-slide-toggel type="category" [data]="cat" [checked]="true"></monitor-slide-toggel>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="divider"></div>
        </div>
        <dashborad-add fxFlex="50%" fxFlex.xs="100%" class="pt10"></dashborad-add>
      </div>
    </div>
  </div>
</div>
